<!--exclude 
<sample>
              <product version="1.4" edition="pro"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               </sample>
 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Fast row adding</title>
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
	<script  src="../../codebase/dhtmlxcommon.js"></script>
	<script  src="../../codebase/dhtmlxgrid.js"></script>		
	<script  src="../../codebase/dhtmlxgridcell.js"></script>
	<script  src="../../codebase/ext/dhtmlxgrid_fast.js"></script>
	<style>
		.even{
			background-color:silver;
		}
		.uneven{
			background-color:white;
		}		
	</style>		
</head>

<body onload='ff()'>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
	<tr valign="middle">
		<!-- COMPONENT ICON -->
		<td width="40" align="center"><img src="../common/dhtmlxgrid_icon.gif" border="0"></td>
		<!-- COMPONENT NAME -->
		<td width="150" align="left" nowrap="true">Sample: dhtmlxGrid</td>
		<!-- SAMPLE TITLE -->
		<td width="0" align="left" nowrap><b>Fast row adding</b></td>
		<!-- LINK TO COMPONENT PAGE -->
		<td width="0" align="right"><a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml">dhtmlxGrid main page</a></td>
		<!-- CLOSE BUTTON -->
		<td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="../common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
	</tr>
</table>
	
	
	
	<p>While the most fast way for loading data is to load them from XML, in some cases, group of rows must be added by script. 
	This extension allows to do it much faster (2-5 times related to normal case)</p>
	<table width="600">
		<tr>
			<td valign="top">
				<div id="gridbox" width="462px" height="250px" style="background-color:white; "></div>
			</td>

		</tr>
		<tr>
			<td>
                <div><input id='z1' type="button"  onclick='adds();' value='add 100 rows'></div>
                <div><input id='z1' type="button"  onclick='adds2();' value='add 100 rows (fast)'></div>
			</td>
		</tr>
	</table>
<br>
<div class='sample_code'><div class="hl-main"><pre><span class="hl-code"> 
    </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code"><div class="hl-main"><pre><span class="hl-code"> 
        </span><span class="hl-identifier">mygrid</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXGridObject</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">gridbox</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
        ...
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">startFastOperations</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
        ...
        </span><span class="hl-comment">//</span><span class="hl-comment">add all 100 row here</span><span class="hl-comment"></span><span class="hl-code">
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">addRow</span><span class="hl-brackets">(</span><span class="hl-identifier">i</span><span class="hl-code">,</span><span class="hl-brackets">[</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">fast</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-identifier">i</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code">;
        ...
        </span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">stopFastOperations</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span></pre></div></div>

<script>

    function ff()
    {
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../../codebase/imgs/");
	mygrid.setHeader("Column A,Column B,Column C");
	mygrid.setInitWidths("150,150,150")
	mygrid.setColAlign("right,left,left")
	mygrid.setColTypes("ed,ed,ed");
	mygrid.setColSorting("int,str,int")
	mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
	
	mygrid.init();
	//mygrid.enableAlterCss("even","uneven")
	
    }
    
    function adds(){
    	mygrid.clearAll();
    	var z=(new Date()).valueOf()
    	for (var i = 99; i >= 0; i--){
    		mygrid.addRow(i,[0,'new',i]);
    	};
    	alert("Time: "+((new Date()).valueOf()-z)+"ms");
    }
	
    function adds2(){
    	mygrid.clearAll();
    	var z=(new Date()).valueOf()
    	mygrid.startFastOperations();
    	for (var i = 99; i >= 0; i--){
    		mygrid.addRow(i,[0,'fast',i]);
    	};
    	mygrid.stopFastOperations();
    	alert("Time: "+((new Date()).valueOf()-z)+"ms");
    }
</script>

<!-- FOOTER -->
<table callspacing="0" cellpadding="0" border="0" class="sample_footer"><tr><td style="padding-left: 8px;">&copy; <a href="http://www.dhtmlx.com">DHTMLX LTD</a>. All rights reserved</td></tr></table>
<!-- FOOTER -->

</body>
</html>
